<template>
  <!-- 选择辅助检查部位 -->
  <el-dialog title="辅助检查部位" :visible="value" width="500px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <ul class="assistcheck-ul">
      <li v-for="(item,index) in itemArr" :key="index">
        <el-checkbox v-model="item.check">{{item.key|changeAssist(checkPartArr)}}</el-checkbox>
      </li>
    </ul>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "itemData"],
  data() {
    return {
      btnLoading: false,
      itemArr: [],
      checkPartArr: []
    };
  },
  created() {
    let th = this;
    th.getCommonConfigByKey("检查部位").then(res => {
      th.checkPartArr = res;
    });
  },
  methods: {
    onSubmit() {
      let th = this;
      let arr = [];
      th.itemArr.forEach(item => {
        if (item.check) {
          arr.push(item.key);
        }
      });
      if (arr.length > 0) {
        th.$emit("change", arr);
      }
      th.onClose();
    },
    onOpen() {
      let th = this;
      th.$nextTick(function() {
        let arr = th.itemData.position.split(",");
        arr.forEach(item => {
          th.itemArr.push({ check: true, key: item });
        });
      });
    },
    onClose() {
      let th = this;
      th.itemArr = [];
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.assistcheck-ul {
  width: 100%;
  padding: 0;
  margin: 0;
  > li {
    float: left;
    list-style: none;
    width: 50%;
    padding: 10px 0;
  }
}
</style>

